<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
</head>

<body>

    <!-- 头部+导航
        navbar：开启导航栏
        bg-dark：黑色背景
        navbar-dark：白色字体
        fixed-top：开启弹性布局并固定在顶部
        navbar-expand-lg：响应式导航栏大小lg
    -->
    <header class="navbar bg-dark navbar-dark fixed-top navbar-expand-lg ">
        <!-- 版心部分
            container：指定两端留白版心
        -->
        <nav class="container">
            <!-- logo+个人名称
                navbar-brand：导航栏中的一栏需要加的属性
            -->
            <a class="navbar-brand" href="../index/index.html">
                <!-- height="40px"：指定图片高度为40px -->
                <img height="40px" src="../../assets/images/itsource-w.png" alt="源码博客">
            </a>

            <!-- 折叠按钮
                navbar-toggler：代表是导航栏中的折叠按钮
                type="button"：默认button是submit，指定为按钮
                data-bs-toggle="collapse"：用于触发折叠菜单的展开与折叠
                data-bs-target="#navmenu"：指定折叠的目标，通过id选择器指定
            -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                <!-- navbar-toggler-icon：指定折叠的图标 -->
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- 导航部分
                collapse：指定一个折叠标签
                navbar-collapse：代表导航栏中的折叠元素
                justify-content-between：指定折叠元素的对齐方式
                ms-5：指定外边距，距离左边5rem
                id="navmenu"：用于折叠按钮寻找到此折叠元素
            -->
            <div class="collapse navbar-collapse justify-content-between ms-5" id="navmenu">
                <!-- navbar-nav：指定导航栏中的导航 -->
                <ul class="navbar-nav">
                    <!-- nav-item：指定导航元素 -->
                    <li class="nav-item">
                        <!-- nav-link：指定导航链接 -->
                        <a class="nav-link" href="../index/index.html"><i class="bi bi-house-door">首页</i></a>
                    </li>
                    <!-- nav-item：指定导航元素 -->
                    <li class="nav-item">
                        <!-- nav-link：指定导航链接 -->
                        <a class="nav-link" href="../blogarchives/blog-archives.html"><i class="bi bi-clock-fill">归档</i></a>
                    </li>
                    <!-- 此处使用的是下拉菜单
                        nav-item：指定导航元素
                        dropdown：指定下拉菜单
                    -->
                    <li class="nav-item dropdown">
                        <!-- nav-link：指定导航链接
                            dropdown-toggle，data-bs-toggle="dropdown"：指定此元素是下拉菜单标签
                            
                        -->
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                            <i class="bi bi-blockquote-right">文章分类</i>
                        </a>
                        <!-- dropdown-menu dropdown-menu-dark：指定下拉菜单内容并设置按钮颜色 -->
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">Java基础</a></li>
                            <li><a class="dropdown-item" href="#">JavaWeb</a></li>
                            <li><a class="dropdown-item" href="#">Java实战</a></li>
                        </ul>
                    </li>
                    <!-- nav-item：指定导航元素 -->
                    <li class="nav-item">
                        <!-- nav-link：指定导航链接 -->
                        <a class="nav-link" href="#"><i class="bi bi-person-lines-fill">关于我</i></a>
                    </li>
                </ul>

                <!-- 搜索按钮部分：使用的是按钮组
                    navbar-nav：指定导航栏中的导航
                -->
                <div class="navbar-nav">
                    <!-- 
                        input-group：指定按钮组
                        input-group-sm：指定按钮组大小
                     -->
                    <div class="input-group">
                        <!-- form-control：指定按钮组搜索框 -->
                        <input type="search" class="form-control form-control-sm" style="box-shadow: none;" placeholder="请输入...">
                        <!-- 
                            type="button"：修改类型为按钮
                            input-group-text：指定为按钮组按钮
                         -->
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnGroupAddon"><i
                                class="bi bi-search"></i></button>
                    </div>
                </div>
            </div>


        </nav>
    </header>



</body>

</html>